<template>
  <view class="trend-detail-root" :style="fullStyle">
    <!-- 详情 begin -->
    <view class="content-item content-item-1">
      <view class="info">
        <view class="reception">
         履职活动
        </view>
        <view>发布单位：{{liaisonNewsDetail.activityInitiatorName}}</view>
        <view>活动目标：{{liaisonNewsDetail.activityTargetTypeName}}</view>
        <view>活动类型：{{liaisonNewsDetail.activityTypeName}}</view>
        <view>开始时间：{{liaisonNewsDetail.activityStartTime}}</view>
        <view>结束时间：{{liaisonNewsDetail.activityEndTime}}</view>
        <view>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;点：{{liaisonNewsDetail.activityAddress}}</view>
      </view>
    </view>
    <!-- 详情 end -->
    <!-- 内容 begin -->
    <view class="content-item content-item-2">
      <view class="header">
        <view class="title">
          内容
          <view class="underline">
          </view>
        </view>
      </view>
      <view class="info text-content">
        {{liaisonNewsDetail.activityDesc}}
      </view>
    </view>
    <!-- 内容 end -->
  </view>

</template>

<script>
import {contactTrendMixins} from "@/mixins/contactTrendMixins";
import {baseMixins} from "@/mixins/baseMixins";
import {requestGet} from "@/until/means/request";
import {GET_LIAISON_NEWS_DETAIL_FOR_ACTIVITY} from "@/api/contact";
import {getFileAccessHttpUrl} from "@/until/fileUtil";

export default {
  mixins: [contactTrendMixins, baseMixins],
  data() {
    return {
      liaisonNewsDetail:{}
    }
  },
  methods: {
    getInfoData() {
      let {liaisonNewsId} = this;
      requestGet({url: GET_LIAISON_NEWS_DETAIL_FOR_ACTIVITY, data: {liaisonNewsId}}).then(res => {
        this.liaisonNewsDetail = res
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.trend-detail-root {
  padding: 0 30rpx;
  color: #222222;
  box-sizing: border-box;
  overflow: auto;

  .content-item {
    display: flex;
    flex-direction: column;
    margin: 30rpx 0;
    font-size: $font-size-medium;
    color: #222222;

    .header {
      display: flex;
      padding: 15rpx 0;
      border-radius: $border-radius-lg;

      .title {
        font-weight: 500;
        font-size: 30rpx;

        .underline {
          margin-top: 10rpx;
          border-radius: 15px;
          border: 3rpx solid #B90303;
        }
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-color: $bg-color-white;
      border-radius: $border-radius-lg;
      padding: 20rpx 20rpx;
    }
  }

  .content-item-1 {
    display: flex;

    .info {
      view {
        margin: 8rpx 0;
      }

      .reception {
        width: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #00CF75;
        color: #FFFFFF;
        border-radius: $border-radius-lg;
        padding: 8rpx 16rpx;
      }
    }
  }

  .content-item-2 {
    display: flex;
  }
}
</style>
